<template>
  <div>
    <div class="playlist">
      <!-- 分类标题 -->
      <div class="cm-title">
        <h3>{{ $route.query.cat ? $route.query.cat : '全部' }}</h3>
        <a
          href="javascript:;"
          class="classfiy u-btn2"
          @click="isDisplay === 'none' ? (isDisplay = 'block') : (isDisplay = 'none')"
          ><i>选择分类<em class="u-icn u-icn-38"></em></i
        ></a>
        <a
          href="/discover/playlist/?cat=全部&offset=0"
          class="u-btn hot"
          @click.prevent="$router.push('/discover/playlist/?cat=全部&offset=0')"
          >热门</a
        >
        <!-- <a href="#" class="hot">热门</a> -->
      </div>
      <!-- 分类列表 -->
      <div class="cateListBox">
        <div class="box-card" :style="{ display: isDisplay }" ref="CardRef">
          <div class="clearfix head">
            <div class="attional"><i class="u-iconall"></i></div>
          </div>
          <div class="bd">
            <h3>
              <a
                href="/discover/playlist/?cat=全部&offset=0"
                class="u-btn"
                @click.prevent="$router.push('/discover/playlist/?cat=全部&offset=0')"
                >全部风格</a
              >
            </h3>
            <dl v-for="(item, index) in cate" :key="index">
              <dt><i class="u-icn"></i>{{ item }}</dt>
              <dd :class="index == 4 ? 'last' : ''">
                <a
                  v-for="item2 in cateList[index]"
                  :key="item2.id"
                  :href="'/discover/playlist/?cat=' + item2.name + '&order=hot'"
                  @click.prevent="
                    $router.push('/discover/playlist/?cat=' + item2.name + '&order=hot')
                  "
                  >{{ item2.name }}</a
                >
              </dd>
            </dl>
          </div>
          <div class="foot"></div>
        </div>
      </div>
      <!-- 歌单列表 -->
      <ul class="pl-container">
        <li v-for="item in playList" :key="item.id">
          <a
            :href="`/playlist?id=${item.id}`"
            class="img-link"
            :title="item.name"
            @click.prevent="$router.push(`/playlist?id=${item.id}`)"
            ><img :src="item.coverImgUrl" alt="" />
            <div class="msk"></div>
            <div class="bottom">
              <span class="icon-head"></span>
              <span class="play-count">{{ item.playCount | CountFormat }}</span>
              <a
                href="javascript:void(0);"
                class="play"
                @click.stop="setSongList(item.id)"
              ></a></div
          ></a>
          <p class="desc">
            <a
              :href="`/playlist?id=${item.id}`"
              @click.prevent="$router.push(`/playlist?id=${item.id}`)"
              >{{ item.name }}</a
            >
          </p>
          <p class="creator">
            <span>by</span>
            <a
              :href="`/user/home?id=${item.creator.userId}`"
              @click.prevent="$router.push(`/user/home?id=${item.creator.userId}`)"
              >{{ item.creator.nickname }}</a
            >
          </p>
        </li>
      </ul>
      <!-- 分页 -->
      <PageNav
        :total="total"
        :pageSize="35"
        :currentPage="currentPage"
        @currentChange="handleCurrentChange"
        v-if="playList"
      ></PageNav>
    </div>
  </div>
</template>

<script>
import PageNav from '@/components/PageNav/PageNav.vue'
import { CountFormat } from '@/utils/filters.js'
import { catlist, playList, topPlayList } from '@/api/playlist.js'
export default {
  components: { PageNav },
  data() {
    return {
      // 歌单列表
      playList: null,
      // 分类列表
      cateList: [],
      // 总页数
      total: 0,
      // 分类
      cate: null,
      // 分类列表显示
      isDisplay: 'none',
      // 路由参数
      params: { order: 'hot', cat: '全部', limit: 35, offset: 0 },
      // 当前页码
      currentPage: 1
    }
  },
  methods: {
    // 获取歌单列表
    async getPlayList() {
      // 将路由参数合并
      const newParams = Object.assign(this.params, this.$route.query)
      // 当前页码
      this.currentPage = newParams.offset / 35 + 1
      // 发起请求
      const { data } = await topPlayList(newParams)
      // 赋值
      this.playList = data.playlists
      this.total = data.total
    },
    // 获取分类列表
    async getCateList() {
      // 发起请求
      const { data } = await catlist()
      // 赋值
      this.cateList = data.sub
      this.cate = data.categories
      // 改写分类列表参数，按照种类放在不同数组
      const tempList = [[], [], [], [], []]
      this.cateList.forEach(item => {
        // console.log(item.category)
        tempList[item.category].push(item)
      })
      this.cateList = tempList
    },
    // 分页按钮改变，重新获取数据
    handleCurrentChange(val) {
      // 更新offset
      this.params.offset = (val - 1) * this.params.limit
      // 将parmas拼接
      const temparr = []
      for (const key in this.params) {
        temparr.push(key + '=' + this.params[key])
      }
      const query = '?' + temparr.join('&')
      // 路由跳转
      this.$router.push('/discover/playlist' + query)
      // 重新获取数据
      this.getPlayList()
    },
    // 更换歌单的播放列表
    async setSongList(id) {
      // /playlist/detail?id=24381616
      const { data } = await playList(id)
      const tracks = data.playlist.tracks
      this.$store.commit('Music/setplayerSettingIndex', 0)
      this.$store.commit('Music/setSongList', tracks)
      // console.log(tracks)
    }
  },
  created() {
    // 获取数据
    this.getCateList()
    this.getPlayList()
  },
  filters: {
    CountFormat
  },
  // 路由参数变化不刷新页面
  watch: {
    $route(to, from) {
      this.getPlayList()
      this.isDisplay = 'none'
      if (from.query.cat) {
        if (from.query.cat !== to.query.cat) {
          this.currentPage = 1
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import './PlayList.less';
</style>
